<template>
  <div class="c-ph24 c-pt40 c-pb30 c-bd-b1" v-if="themeName == 'mb5' && !isMicroPage">
    <div class="c-flex-row c-aligni-center">
      <span class="c-fs30">{{eduName}}</span>
      <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{eduDesc}}</span>
      <span class="c-fs20 c-fc-gray" @click="clickMoreEdu">更多</span>
    </div>
    <div @click="clickGoEduDetail(item.id)" class=" c-pt30 c-flex-row" :key="index" v-for="(item,index) in eduList">
      <div class="c-ww240 c-maxh140 c-text-hidden c-p  c-br10">
        <img class="c-w100 imgCloseBig c-br10" :src="$addXossFilter(item.image, require('../../assets/defult270.png'))" />
        <div class="c-pa c-p-t0 c-p-l0 c-fc-white c-fs20 c-hh30 c-br-br36 c-pl8 c-pr16 c-lh30" :class="item.saleCourseType==1?'c-bg-experience':'c-bg-formal'">
          {{item.saleCourseType==1?'体验课':'正式课'}}
        </div>
      </div>
      <div class="c-pl20 c-w0 c-flex-grow1 c-flex-column c-justify-sb c-p">
        <div class="c-fs24 c-text-ellipsis1 c-lh36">{{item.saleCourseName}}</div>
        <div class="c-fs20 c-fc-gray c-pv28">剩余名额:{{item.stock - item.saleNum}}</div>
        <div class="theme-fc c-lh" :class="Number(item.price) == 0 ? 'c-fs22' : 'c-fs24'">
          <span v-if="Number(item.price) != 0">{{'￥' | iosPriceFilter}}</span>{{item.price | moneyStr}}
        </div>
        <div class="c-pa c-p-r0 c-p-b0 c-ww120 c-hh48 c-fs26 c-lh48 c-textAlign-c theme-bg-gradient c-fc-white c-br24">报名</div>
      </div>
    </div>
  </div>
  <div class="c-ph24 c-bd-b12-f5" v-else-if="themeName == 'mb4' && !isMicroPage">
    <div class="c-pt40 c-flex-row c-aligni-center">
      <span class="c-fs30 c-lh c-pl20 c-p"><span class="c-pa theme-bd-l2 theme-bd-r2 c-h c-p-l0 c-br8 c-w0"></span>{{eduName}}</span>
      <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{eduDesc}}</span>
      <span class="c-fs20 c-fc-gray c-pl8" @click="clickMoreEdu">查看更多</span>
    </div>

    <div class="c-pb30 c-flex-row c-justify-sb c-flexw-wrap">
      <div v-for="(item,index) in eduList" :key="index" class="c-pt30 c-ww286 c-pb20" @click="clickGoEduDetail(item.id)">
        <div class="c-ww286 c-maxh190 c-br10 c-text-hidden c-p">
          <img class="c-w100 imgCloseBig c-br10" :src="$addXossFilter(item.image, require('../../assets/defult270.png'))" />
          <div class="c-pa c-p-t0 c-p-l0 c-fc-white c-fs20 c-hh30 c-br-br36 c-pl8 c-pr16 c-lh30" :class="item.saleCourseType==1?'c-bg-experience':'c-bg-formal'">
            {{item.saleCourseType==1?'体验课':'正式课'}}
          </div>
        </div>
        <div class="c-p">
          <div class="c-fs24 c-text-ellipsis1 c-lh c-pt16">{{item.saleCourseName}}</div>
          <div class="c-fs20 c-mt16 c-fc-gray">剩余名额:{{item.stock - item.saleNum}}</div>
          <div class="c-flex-row c-aligni-center theme-fc c-mt16">
            <span :class="item.price * 1 > 0 ? 'c-fs24' : 'c-fs22'"><span v-if="item.price * 1 > 0" class="c-fs24">{{'￥' | iosPriceFilter}}</span>{{item.price | moneyStr}}</span>
          </div>
          <div class="c-pa c-p-r0 c-p-b0 c-ww120 c-hh48 c-fs26 c-lh48 c-textAlign-c theme-bg-gradient c-fc-white c-br24">报名</div>
        </div>
      </div>
    </div>
  </div>

  <div v-else-if="themeName == 'mb3' && !isMicroPage">
    <index-three-title-com :titleName="eduName" :titleDesc="eduDesc" @clickMore="clickMoreEdu"></index-three-title-com>
    <div class="c-ph24 c-pb20 c-bd-b12-f5">
      <div class="c-pt24 c-flex-row c-justify-sb" @click="clickGoEduDetail(item.id)" :key="index" v-for="(item,index) in eduList">
        <div class="c-pb24">
          <div class="c-ww210 c-maxh210 c-text-hidden c-p c-br10">
            <img class="c-w100 imgCloseBig " :src="$addXossFilter(item.image, require('../../assets/defult270.png'))" />
            <div class="c-pa c-p-t0 c-p-l0 c-fc-white c-fs20 c-hh30 c-br-br36 c-pl8 c-pr16 c-lh30" :class="item.saleCourseType==1?'c-bg-experience':'c-bg-formal'">
              {{item.saleCourseType==1?'体验课':'正式课'}}
            </div>
          </div>
        </div>
        <div class="c-p c-w0 c-flex-grow1 c-flex-row c-aligni-center c-justify-sb c-ml20 c-pb24" :class="index != eduList.length-1 ? 'c-bd-b1' : ''">
          <div class="c-w0 c-flex-grow1 c-flex-column c-justify-sb">
            <div class="c-fs24 c-text-ellipsis1 c-lh">{{item.saleCourseName}}</div>
            <div class="c-fs18 c-pv28 c-fc-gray">剩余名额:{{item.stock - item.saleNum}}</div>
            <div class="c-flex-row c-aligni-center c-justify-sb">
              <div class="c-fs24 c-flex-row c-aligni-center theme-fc">
                <span :class="item.price * 1 > 0 ? 'c-fs24' : 'c-fs22'"><span v-if="item.price * 1 > 0" class="c-fs24">{{'￥' | iosPriceFilter}}</span>{{item.price | moneyStr}}</span>
              </div>
              <div class="c-ww120 c-hh48 c-fs26 c-lh48 c-textAlign-c theme-bg-gradient c-fc-white c-br24">报名</div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

  <div class="c-ph24 c-pt24 c-pb40 c-mt12 c-bg-white" v-else-if="themeName == 'mb6' && !isMicroPage">
    <div class="c-flex-row c-aligni-end c-mb10">
      <span class="c-fs28 c-fw-b">{{eduName}}</span>
      <span class="c-fs20 c-fc-gray c-mb2 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{eduDesc}}</span>
      <span class="c-fs18 c-fc-gray" @click="clickMoreEdu">更多</span>
    </div>
    <div @click="clickGoEduDetail(item.id)" class="c-pt24 c-flex-row " :key="index" v-for="(item,index) in eduList">
      <div class="c-ww160 c-maxh106 c-text-hidden c-p c-br10">
        <img class="c-w100 imgCloseBig c-br10 c-h" :src="$addXossFilter(item.image, require('../../assets/defult270.png'))" />
        <div class="c-pa c-p-t0 c-p-l0 c-fc-white c-fs20 c-hh30 c-br-tl10 c-br-br36 c-pl8 c-pr16 c-lh30" :class="item.saleCourseType==1?'c-bg-experience':'c-bg-formal'">
          {{item.saleCourseType==1?'体验课':'正式课'}}
        </div>
      </div>
      <div class="c-pl20 c-w0 c-flex-grow1 c-flex-column c-p" :class="index == eduList.length - 1 ? '' : 'c-pb24 c-bd-b1'">
        <div class="c-fs24 c-text-ellipsis1 c-fw-b">{{item.saleCourseName}}</div>
        <div class="c-flex-row c-aligni-center c-justify-sb">
          <div class="c-fs20 c-fc-gray c-pv10">剩余名额:{{item.stock - item.saleNum}}</div>
          <div class="c-ww120 c-hh48 c-fs20 c-lh48 c-textAlign-c theme-bg-gradient c-fc-white c-br24">报名</div>
        </div>
        <div class="theme-fc c-lh" :class="Number(item.price) == 0 ? 'c-fs22' : 'c-fs24'">
          <span v-if="Number(item.price) != 0">{{'￥' | iosPriceFilter}}</span>{{item.price | moneyStr}}
        </div>
      </div>
    </div>
  </div>

  <div class="c-w100" v-else-if="(themeName == 'mb7' && isFromM7) || isMicroPage">
    <div class="c-pv24" v-for="(item,index) in eduList" :key="index" @click="clickGoEduDetail(item.id)" v-if="itemType == 1">
      <div class="c-flex-row c-bg-white c-br16 c-text-hidden">
        <div class="c-ww240 c-maxh240 c-text-hidden c-p c-flex-shrink0" :class="!isSetPageBackground ? 'c-br16' : ''">
          <img class="c-w100 c-block" :src="$addXossFilter(item.image, require('../../assets/defult270.png'))" @error="item.image = require('../../assets/defult270.png')" alt="" />
          <div class="c-pa c-p-t0 c-p-l0 c-fc-white c-fs18 c-hh28 c-br-tl16 c-br-br16 c-ph10 c-lh28" :class="item.saleCourseType==1?'pinkGradient':'greenGradient'">{{item.saleCourseType==1?'体验课':'正式课'}}</div>
        </div>
        <div class="c-flex-column c-justify-sb c-ml20 c-flex-grow1 c-w0 c-p" :class="isSetPageBackground ? 'c-pv20 c-pr10' : ''">
          <div class="c-fs24 c-text-ellipsis2 c-fc-xblack c-fw-b">{{item.saleCourseName}}</div>
          <div class="c-fs22 c-fc-gray" v-if="visible.dataVisible && visible.priceVisible">剩余名额:{{item.stock - item.saleNum}}</div>
          <div class="c-flex-row c-justify-end c-aligni-center">
            <div v-if="visible.priceVisible" class="theme-fc c-lh c-flex-grow1 c-fw-b" :class="Number(item.price) == 0 ? 'c-fs22' : 'c-fs24'">
              <span v-if="Number(item.price) != 0">{{'￥' | iosPriceFilter}}</span>{{item.price | moneyStr}}
            </div>
            <div class="c-fs22 c-fc-gray c-flex-grow1" v-if="visible.dataVisible && !visible.priceVisible">剩余名额:{{item.stock - item.saleNum}}</div>
            <div class="c-ww120 c-hh48 c-lh48 c-textAlign-c c-fc-white theme-bg c-br36 c-ml20 c-fs24 c-mr14">报名</div>
          </div>
        </div>
      </div>
    </div>

    <div class="c-w100" v-if="itemType == 2">
      <div class="c-flex-row c-flexw-wrap c-justify-sb">
        <div class="c-flex-column c-ww284 c-pt20" v-for="(item,index) in eduList" :key="index" @click="clickGoEduDetail(item.id)">
          <div class="c-bg-white c-br16">
            <div class="c-ww284 c-maxh284 c-text-hidden c-p">
              <img class="c-w100 c-br16" :src="$addXossFilter(item.image, require('../../assets/defult270.png'))" @error="item.image = require('../../assets/defult270.png')" alt="" />
              <div class="c-pa c-p-t0 c-p-l0 c-fc-white c-fs18 c-hh28 c-br-tl16 c-br-br16 c-ph10 c-lh28" :class="item.saleCourseType==1?'pinkGradient':'greenGradient'">{{item.saleCourseType==1?'体验课':'正式课'}}</div>
            </div>
            <div class="c-ph10 c-pb10">
              <div class="c-fs24 c-text-ellipsis1 c-fc-xblack c-mt16 c-fw-b">{{item.saleCourseName}}</div>
              <div class="c-mt10 c-fs20 c-fc-gray" v-if="visible.dataVisible && visible.priceVisible">剩余名额:{{item.stock - item.saleNum}}</div>
              <div class="c-flex-row c-justify-end c-aligni-center c-mt10">
                <div class="theme-fc c-lh c-flex-grow1 c-fw-b" v-if="visible.priceVisible" :class="Number(item.price) == 0 ? 'c-fs22' : 'c-fs24'">
                  <span v-if="Number(item.price) != 0">{{'￥' | iosPriceFilter}}</span>{{item.price | moneyStr}}
                </div>
                <div class="c-fs20 c-fc-gray c-flex-grow1" v-if="visible.dataVisible && !visible.priceVisible">剩余名额:{{item.stock - item.saleNum}}</div>
                <div class="c-ww120 c-hh48 c-lh48 c-textAlign-c c-fc-white theme-bg c-br36 c-fs24">报名</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="c-w100" v-if="itemType == 4">
      <div class="c-flex-column c-w100 c-pv20" v-for="(item,index) in eduList" :key="index" @click="clickGoEduDetail(item.id)">
        <div class="c-bg-white c-br16 c-text-hidden">
          <div class="c-w100 c-maxh592 c-text-hidden c-p" :class="!isSetPageBackground ? 'c-br16' : ''">
            <img class="c-w100" :src="$addXossFilter(item.image, require('../../assets/defult270.png'))" @error="item.image = require('../../assets/defult270.png')" alt="" />
            <div class="c-pa c-p-t0 c-p-l0 c-fc-white c-fs18 c-hh28 c-br-tl16 c-br-br16 c-ph10 c-lh28" :class="item.saleCourseType==1?'pinkGradient':'greenGradient'">{{item.saleCourseType==1?'体验课':'正式课'}}</div>
          </div>
          <div class="c-pb20" :class="!isSetPageBackground ? 'c-ph10' : 'c-ph20'">
            <div class="c-fs24 c-text-ellipsis1 c-fc-xblack c-mt16 c-fw-b">{{item.saleCourseName}}</div>
            <div class="c-flex-row c-justify-end c-aligni-center">
              <div class="theme-fc c-lh c-mt10 c-fw-b c-flex-row c-aligni-center c-flex-grow1 c-fw-b" v-if="visible.priceVisible" :class="Number(item.price) == 0 ? 'c-fs24' : 'c-fs26'">
                <span v-if="Number(item.price) != 0">{{'￥' | iosPriceFilter}}</span>{{item.price | moneyStr}}
                <div class="c-fs20 c-fc-gray c-fw-n c-pl8" v-if="visible.dataVisible">|  剩余名额:{{item.stock - item.saleNum}}</div>
              </div>
              <div class="c-ww120 c-hh48 c-lh48 c-textAlign-c c-fc-white theme-bg c-br36 c-ml20 c-fs24">报名</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="c-w100" v-if="itemType == 5">
      <div class="c-w100 c-contexty-hidden c-contextX-scroll c-ws-n c-pv20">
        <div class="c-inlineblack c-vcAlign-top c-ww260 c-mr20 c-bd1 c-br16 c-pb10 c-text-hidden c-bg-white" v-for="(item,index) in eduList" :key="index" @click="clickGoEduDetail(item.id)">
          <div class="c-w100 c-text-hidden c-p c-maxh260">
            <img class="c-w100 c-br16" :src="$addXossFilter(item.image, require('../../assets/defult270.png'))" @error="item.image = require('../../assets/defult270.png')" alt="" />
            <div class="c-pa c-p-t0 c-p-l0 c-fc-white c-fs18 c-hh28 c-br-tl16 c-br-br16 c-ph10 c-lh28" :class="item.saleCourseType==1?'pinkGradient':'greenGradient'">{{item.saleCourseType==1?'体验课':'正式课'}}</div>
          </div>
          <div class="c-fs24 c-text-ellipsis1 c-fc-xblack c-mt16 c-ph10 c-fw-b">{{item.saleCourseName}}</div>
          <div class="c-mt10 c-fs20 c-fc-gray c-ph10" v-if="visible.dataVisible && visible.priceVisible">剩余名额:{{item.stock - item.saleNum}}</div>
          <div class="c-flex-row c-justify-end c-aligni-center c-ph10 c-mt10">
            <div class="theme-fc c-lh c-flex-grow1 c-fw-b" v-if="visible.priceVisible" :class="Number(item.price) == 0 ? 'c-fs22' : 'c-fs24'">
              <span v-if="Number(item.price) != 0">{{'￥' | iosPriceFilter}}</span>{{item.price | moneyStr}}
            </div>
            <div class="c-fs20 c-fc-gray c-flex-grow1" v-if="visible.dataVisible && !visible.priceVisible">剩余名额:{{item.stock - item.saleNum}}</div>
            <div class="c-ww120 c-hh48 c-lh48 c-textAlign-c c-fc-white theme-bg c-br36 c-fs24">报名</div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="showMore && ![4, 5].includes(itemType)" class="c-fs20 c-textAlign-c c-pv16" :class="pageTextColor ? 'pageTextColor' : 'c-fc-sblack'" @click="clickMore">查看更多 <span class="icon iconfont">&#xe836;</span></div>
  </div>
</template>
<script>
import indexThreeTitleCom from "@/components/templates/common/indexThreeTitleCom.vue";
import { utilJs } from "@/utils/common.js"
export default {
  name: "EduIndexCom",
  components: {
    indexThreeTitleCom
  },
  props: {
    eduName: {
      type: String,
      default: '面授课',
    },
    eduDesc: {
      type: String,
      default: '面授课',
    },
    eduList: {
      type: Array,
      default: () => []
    },
    isFromM7: {
      type: Boolean,
      default: false
    },
    itemType: {
      type: Number,
      default: 1, //1一行一列，2一行两列，3一行三列
    },
    showCount: {
      type: Number,
      default: 1
    },
    isMicroPage: {
      type: Boolean,
      default: false
    },
    showMore: {
      type: Boolean,
      default: false
    },
    visible:{
      type: Object,
      default: () => {
        return {
          priceVisible:true, // 价格、商品价格
          originalPriceVisible:true, // 划线价格
          dataVisible:true, // 商品数据、数据字段、数据
          statusVisible:true, // 状态
          forecastVisible:true, // 预告时间
          qrVisible:true, // 预告二维码
          vipVisible:true, // vip角标
        }
      },
    }
  },
  data() {
    return {
      theme: localStorage.getItem("colorName")
        ? localStorage.getItem("colorName")
        : "mb5_default",
      themeName: localStorage.getItem("themeName")
        ? localStorage.getItem("themeName")
        : "mb5",
      isSetPageBackground: sessionStorage.getItem("isSetPageBackground") || 0,
      pageTextColor: sessionStorage.getItem('pageTextColor') || '',
    };
  },
  methods: {
    clickMore() {
      this.$emit('clickMore');
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    clickMoreEdu() {
      let toPath = `/edu/eduList`;
      this.iosAppRouteChange(toPath);
    },
    clickGoEduDetail(id) {
      let toPath = `/edu/eduDetail?id=${id}`;
      this.iosAppRouteChange(toPath);
    }
  }
};
</script>

<style scoped>
.mb4_default .theme-bd-r2 {
  border-right: 2px solid #ff300c;
}
.ww112 {
  width: 2.8rem;
}
.greenGradient{
  background-image: linear-gradient(90deg, #38D788 0%, #88E59B 100%);
}
.pinkGradient{
  background-image: linear-gradient(90deg, #FF6757 0%, #F7968C 100%);
}
</style>
